<template>
    <div class="input-control search-box search-box-circle has-icon-left has-icon-right" id="searchboxExample">
        <input id="inputSearchExample1" 
            type="search" 
            class="form-control search-input" 
            :placeholder="placeholder"
            @input="handInput"
            @keyup.enter="handEnter">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon">
            <i class="icon icon-search"></i>
        </label>
        <a class="input-control-icon-right search-clear-btn" @click="clearTxt">
            <i class="icon icon-remove"></i>
        </a>
    </div>
</template>
<script>
export default {
    name: 'vcu-search',
    props: ['placeholder'],
    methods: {
        // input
        handInput(e) {
            this.$emit('input', e.target.value);
        },
        // enter
        handEnter(e) {
            this.$emit('enter', e.target.value);
        },
        // 清除搜索框文本
        clearTxt() {
            document.getElementById('inputSearchExample1').value = '';
            
        }
    }
}
</script>
<style scoped>

</style>